* {
    font-family: sans-serif;
}

#headboard {
    margin-top: 0;
    padding-top: 0;
    z-index: 100;
    
    position: relative;
    color: white;
    background-color: black;
    height: 70px;
    z-index: 100;
}

#headboard h2 {
    text-align: center;
    font-size: xx-large;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#title-image {
    content: url("../Assets/LogoV2.svg");
    opacity: 0.9;
    position: absolute;
    top: 10px;
    left: 5px;
    width: 250px;
    /* transform: translate(5px, 0); */
}

@keyframes popupFade {
    0% { opacity: 1; transform: translate(-50%, -20px);}
    100% { opacity: 0; transform: translate(-50%, -40px);}
}

.invalid-word-popup {
    background-color: rgb(217, 62, 62);
    color: white;
    border-radius: 3px;
    padding: 6px 4px 6px 4px;
    width: max-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: popupFade 1s ease-in forwards;
}

#rocket-distance {
    opacity: 0;
    position: absolute;
    bottom: -180px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: x-large;
    font-weight: bold;
    color: white;
    width: fit-content;
    /* background-color: black; */
    /* border-radius: 3px; */
    transition: all 0.5s ease-out;
}

#rocket-distance.active {
    opacity: 1;
    bottom: -120px;
    transition: all 0.5s ease-out;
}

#footboard {
    z-index: 100;
    
    position: relative;
    bottom: 0;
    padding-bottom: 3000px;
}



#event-title {
    text-align: center;
    color: white;
    margin: auto;
    padding: 2px;
    border-radius: 2px;
    width: fit-content;
    opacity: 0;
    background-color: black;
    transform: translate(-40px, 0);
}

#event-status {
    text-align: center;
    color: white;
    opacity: 0;
    margin: auto;
    padding: 2px;
    border-radius: 2px;
    width: fit-content;
    background-color: black;
    transform: translate(-40px, 0);
}

span.success-status {
    color: #59f893;
}

span.fail-status {
    color: #ff6072;
}

span.sufficient-status {
    color: #70fba3;
}

span.insufficient-status {
    color: #fc6f7b;
    text-decoration: underline;
}

span.gun-status {
    color: #ff3b42;
}

span.thruster-status {
    color: #f88d50;
}

span.amp-status {
    color: #59f8d8;
}

span.shield-status {
    color: #84c3fb;
}

#shield-status {
    text-align: center;
    color: #fe6479;
    opacity: 0;
    padding: 2px;
    margin:auto;
    width: max-content;
    background-color: black;
    border-radius: 2px;
    font-style:italic;
    transform: translate(-40px, 0);
}






#final-popup {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-100%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: black;
    z-index: 200;
    /* border: 3px solid rgb(86, 86, 86); */
    z-index: 10;

}

#final-popup-logo {
    content: url("../Assets/LogoV2Black.svg");
    width: 170px;
    margin-bottom: 5px;
}

#share-button {
    display: block;
    position: relative;
    margin:auto;
    background: none;
    border: none;
    margin-bottom: 5px;;
    cursor: pointer;
    font-weight: bold;
    color: grey;
}
#share-symbol {
    content: url("../Assets/ShareSymbol.svg");
    margin-right: 2px;
    width: 15px;
    vertical-align: middle;
}

.share-popup {
    background-color: rgb(62, 217, 158);
    color: white;
    border-radius: 3px;
    padding: 6px 4px 6px 4px;
    width: max-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: popupFade 0.5s ease-in forwards;
}

#retry-button {
    display: block;
    margin:auto;
    padding: 10px 20px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    background-color: rgb(60, 35, 249);
    border: none;
    border-radius: 5px;
}
#leaderboard-button {
    display: none;
    margin:auto;
    padding: 10px 20px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    background-color: rgb(35, 124, 249);
    border: none;
    border-radius: 5px;
}


#leaderboard-window {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    /* height: 700px; */
    height: fit-content;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    color: black;
    z-index: 200;
    /* border: 3px solid rgb(86, 86, 86); */
}

#leaderboard-logo {
    content: url("../Assets/LogoV2Black.svg");
    width: 200px;
    margin: 5px;
}

#leaderboard-window hr {
    border-radius: 1px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(26, 26, 26);
    margin-top: 6px;
    margin-bottom: 6px;
}

#best-header, #popular-header {
    /* display: block;
    float: left; */
    width: 49%;
    margin: 0;
    padding: 10px;
    border:none;
    background-color: white;
    border-radius:10px;
    font-weight: bold;
}

#best-header:hover, #popular-header:hover {
    background-color: rgb(230, 230, 230);
    /* border: solid 2px rgb(26, 26, 26);
    border-bottom: none; */
}

#best-header.selected, #popular-header.selected {
    background-color: lightgrey;
}

#leaderboard-left-header {
    text-transform: capitalize;
    float: left;
    width: 48%;
    text-align: left;
    margin-left: 2%;
    margin-bottom: 6px;
}

#leaderboard-right-header {
    float: right;
    width: 48%;
    text-align: right;
    margin-right: 2%;
    margin-bottom: 6px;
}

#leaderboard-left {
    text-transform: capitalize;
    float: left;
    width: 48%;
    text-align: left;
    margin-left: 2%;
    margin-top: 0px;
}

#leaderboard-right {
    float: right;
    width: 48%;
    text-align: right;
    margin-right: 2%;
    margin-top: 0px;
}

#leaderboard-window h3 {
    margin-bottom: 0px;
}

#personal-score-left {
    text-transform: capitalize;
    float: left;
    width: 48%;
    text-align: left;
    margin-left: 2%;
    margin-top: 0px;
}

#personal-score-right {
    float: right;
    width: 48%;
    text-align: right;
    margin-right: 2%;
    margin-top: 0px;
}


/* Animations */

#footboard.retracted {
    transition: all 1s;
    transform: translate(0, 400px);
}

#event-title.fadeIn {
    transform: translate(0, 0);
    opacity: 1;
    transition: all 0.5s ease-out;
}

#event-title.fadeOut {
    transform: translate(-40px, 0);
    opacity: 0;
    transition: all 0.5s ease-out;
}

#event-status.fadeIn {
    transform: translate(0, 0);
    opacity: 1;
    transition: all 0.5s ease-out;
}

#event-status.fadeOut {
    transform: translate(-40px, 0);
    opacity: 0;
    transition: all 0.5s ease-out;
}

#shield-status.fadeIn {
    transform: translate(0, 0);
    opacity: 1;
    transition: all 0.5s 0.25s ease-out;
}

#shield-status.fadeOut {
    transform: translate(-40px, 0);
    opacity: 0;
    transition: all 0.5s ease-out;
}

#final-popup {
    opacity: 0;
}


#final-popup.fadeIn {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

#leaderboard {
    opacity: 0;
}

#leaderboard-window.fadeIn {
    display: block;
    opacity: 1;
    transition: opacity 0.5s ease-in;
}